<?=$this->render('header.phtml');?>

<? extract($this->getVars(), EXTR_REFS); ?>

<style type="text/css">
a img {border:none;}
#tree {float:left;}
#action {margin-left:300px;}
</style>

<form id="folder" method="POST">
<input type="hidden" id="op" name="op" />
<input type="hidden" name="id" value="<?=$id?>" />

<div id="main">
    <div id="tree">
        <div style="margin:5px;">
        <input type="button" value="New Folder" class="button" onclick="location='/file/folder'" />
        <input type="button" value="Upload File" class="button" onclick="location='/file/upload?folder_id=<?=$id?>'" />
        </div>
        <div style="margin:5px;"><a href="javascript:d.openAll();"><b>Expand All</b></a>&nbsp; | &nbsp;<a href="javascript:d.closeAll();"><b>Collapse All</b></a></div>
        <script type="text/javascript">
        d = new dTree('d');
        d.add(0, -1, '<b>Root Folder</b>');
        <? foreach ($folders as $item) { ?>
        <? if ($id == $item['folder_id']) $name = "<font color=green>{$item['folder_name']}</font>"; else $name = $item['folder_name'] ?>
        d.add(<?=$item['folder_id']?>, <?=$item['parent_id']?>, '<?=$name?>', '?id=<?=$item['folder_id']?>', '<?=$item['folder_name']?>', '_self', '/images/dtree/folder.gif');
        <? } ?>
        document.write(d);
        </script>
    </div> <!-- end #tree -->

    <div id="action">
        <table cellspacing="10">

        <tr><td><b>Parent: </b></td><td><select name="parent_id">
        <option value="0">—— Root Folder ——</option>
        <?=$menus?>
        </select></td></tr>
        <tr><td><b>Name: </b></td><td><input type="text" id="folder_name" name="folder_name" size="30" value="<?=@$info['folder_name']?>" /></td></tr>
        <tr><td><b>Description: </b></td><td><textarea id="description" name="description" rows="5" cols="50"><?=@$info['description']?></textarea></td></tr>
        <tr><td colspan="2">
            <? if (!empty($id)) { ?>
            <input type="button" value="Save changes" onclick="update();" title="Save changes" class="button"/>
            <input type="button" value="Delete" onclick="del();" title="Delete this folder" class="button"/>
            <input type="button" value="Transfer files" onclick="transfer(<?=$id?>);" title="Transfer files" class="button"/>
            <? } else { ?>
            <input type="button" value="Save" onclick="add();" title="Create a new folder" class="button"/>
            <? } ?>
            <input type="reset" value="Clear" class="button" />
        </td></tr>
        </table>
    </div> <!-- end #action -->
    <div class="clearfloat"></div>
</div> <!-- end #main -->

</form>

<?=$this->render('footer.phtml');?>

<script type="text/javascript">
function add() {
    $("#op").val('add');
    if ($.trim($("#folder_name").val()).length == 0) {
        alert('Please input the folder name.');
        return;
    }
    $("#folder").submit();
};
function update() {
    $("#op").val('update');
    if ($.trim($("#folder_name").val()).length == 0) {
        alert('Please input the folder name.');
        return;
    }
    if (confirm('Are you sure you wish to save the changes made to this folder? This operation cannot be undone.')) {
        $("#folder").submit();
    }
};
function del() {
    if (confirm('Are you sure to delete this folder?')) {
        $("#op").val('delete');
        $("#folder").submit();
    }
}
function transfer(id) {
    location='/file/transfer?from=' + id;
}

$().ready(function() {
    <? if (!empty($id)) { ?>
    d.openTo(<?=$id?>);
    <? } ?>
});
</script>